<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .bigBox {
            padding: 0;
            margin: 0;
            width: 500px;
            box-sizing: border-box;
            margin: 0 auto;
            border: 1px solid #000;
        }

        header {
            width: 100%;
            display: flex;
            line-height: 45px;
            text-align: center;
            background-color: #000;
            color: #fff;
        }

        header span {
            flex: 1;

        }

        section ul {
            display: none;
        }

        /* 第一个显示 */
        .bb {
            display: block;
        }

        .aa {
            background-color: rgba(255, 255, 255, 0.973);
            color: #000;
        }
    </style>
</head>

<body>
    <div class="bigBox">
        <header>
            <span class="aa">第一个</span>
            <span>第二个</span>
            <span>第三个</span>
        </header>

        <section>
            <ul class="bb">
                <li>111111111111111</li>
                <li>111111111111111</li>
                <li>111111111111111</li>
                <li>111111111111111</li>
                <li>111111111111111</li>
                <li>111111111111111</li>
                <li>111111111111111</li>
                <li>111111111111111</li>
                <li>111111111111111</li>
                <li>111111111111111</li>
            </ul>
            <ul>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
                <li>222222222222222222</li>
            </ul>
            <ul>
                <li>333333333333333</li>
                <li>333333333333333</li>
                <li>333333333333333</li>
                <li>333333333333333</li>
                <li>333333333333333</li>
                <li>333333333333333</li>
                <li>333333333333333</li>
                <li>333333333333333</li>
                <li>333333333333333</li>
                <li>333333333333333</li>
            </ul>
        </section>
    </div>
</body>

<script>
    var span = document.querySelectorAll('span')
    var ul = document.querySelectorAll('ul')
    var aa = document.querySelector('.aa')
    var bb = document.querySelector('.bb')

    for (var i = 0; i < span.length; i++) {
        span[i].index = i

        span[i].onmouseover = function () {
            this.className = 'aa'
            ul[this.index].style.display =  'block'
        }

        span[i].onmouseout = function () {
            this.className = ''
            ul[this.index].style.display =  'none'
        }


    }


</script>

</html>